/* =============================================================================
 *
 * Waybar styles
 *
 * Styles reference: https://github.com/Alexays/Waybar/wiki/Configuration
 *
 * =========================================================================== */

/* -----------------------------------------------------------------------------
 * Keyframes
 * -------------------------------------------------------------------------- */

@keyframes blink-warning {
  70% {
    color: white;
  }

  to {
    color: white;
    background-color: orange;
  }
}

@keyframes blink-critical {
  70% {
    color: white;
  }

  to {
    color: white;
    background-color: red;
  }
}

/* -----------------------------------------------------------------------------
 * Base styles
 * -------------------------------------------------------------------------- */

/* Reset all styles */
* {
  border: none;
  border-radius: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
}

/* The whole bar */
#waybar {
  background-color: #222222; /* Sway palette: unfocused/background */
  color: #ffffff; /* Sway palette: focused/text */
  font-family: monospace, system-ui, sans-serif;
  font-size: 12px;
}

/* -----------------------------------------------------------------------------
 * Module styles
 * -------------------------------------------------------------------------- */
/* Each module */
#backlight,
#battery,
#clock,
#cpu,
#custom-primary,
#custom-clipboard,
#custom-keyboard-layout,
#custom-dunst,
#custom-pacman,
#custom-uptime,
#idle_inhibitor,
#disk,
#memory,
#mode,
#network,
#pulseaudio,
#temperature,
#tray {
  margin-left: 18px;
}

#backlight {
  /* No styles */
}

#battery {
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

#battery.warning {
  color: orange;
}

#battery.critical {
  color: red;
}

#battery.warning.discharging {
  animation-name: blink-warning;
  animation-duration: 3s;
}

#battery.critical.discharging {
  animation-name: blink-critical;
  animation-duration: 2s;
}

#clock {
  /* No styles */
}

#clock.time {
  margin-left: 12px;
  margin-right: 12px;
  min-width: 60px;
}

#cpu {
  /* No styles */
}

#cpu.warning {
  color: orange;
}

#cpu.critical {
  color: red;
}

#custom-keyboard-layout {
  margin-left: 22px;
}

#disk {
  /* No styles */
}

#disk.warning {
  color: orange;
}

#disk.critical {
  color: red;
}

#memory {
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

#memory.warning {
  color: orange;
}

#memory.critical {
  color: red;
  animation-name: blink-critical;
  animation-duration: 2s;
}

#mode {
  color: #ffffff; /* Sway palette: urgent/text */
  background-color: #900000; /* Sway palette: urgent/background */
  margin-left: 0;
  /* To compensate for the top border and still have vertical centering */
  padding: 0 16px;
}

#network {
  /* No styles */
}

#network.disconnected {
  color: orange;
}

#pulseaudio {
  /* No styles */
}

#pulseaudio.muted {
  /* No styles */
}

#temperature {
  /* No styles */
}

#temperature.critical {
  color: red;
}

#tray {
  /* No styles */
}

#window {
  margin-left: 32px;
  margin-right: 32px;
}

#workspaces {
  padding: 2px 2px;
}

#workspaces .active * {
  /* background-color: rgba(79, 79, 79, 0.8); */
	/* background-color: rgba(0x5f, 0x67, 0x6a, 0.5); */
  /* color: #c5841a; */
  color: #FF5555;
}

#workspaces button {
  border-top: 2px solid transparent;
  /* To compensate for the top border and still have vertical centering */
  padding-bottom: 2px;
  padding-left: 4px;
  padding-right: 4px;
  color: #888888; /* Sway palette: unfocused/text */
}

#workspaces button:hover {
  /* Reset all hover styles */
  background: inherit;
  box-shadow: inherit;
  text-shadow: inherit;
}

#workspaces button.visible {
  border-color: #333333; /* Sway palette focused_inactive/border */
  color: #ffffff; /* Sway palette: focused_inactive/text */
  background-color: #5f676a; /* Sway palette focused_inactive/background */
}

#workspaces button.focused {
  border-color: #4c7899; /* Sway palette: focused/border */
  color: #ffffff; /* Sway palette: focused/text */
  background-color: #285577; /* Sway palette: focused/background */
}

#workspaces button.urgent {
  border-color: #2f343a; /* Sway palette: urgent/border */
  color: #ffffff; /* Sway palette: urgent/text */
  background-color: #900000; /* Sway palette: urgent/background */
}
